<template>
    <div style="margin-top:200px">
        <nav>
      <ul>
       <!-- <router-link to="/films" tag="li" active-class="active">电影</router-link>
       <router-link to="/cinema" tag="li" active-class="active">影院</router-link>
       <router-link to="/center" tag="li" active-class="active">个人中心</router-link> -->
       <router-link v-for="item in navList" :key="item.id" :to="item.path" tag="li" active-class="active"><i class="iconfont" :class="item.icfont"></i>{{item.title}}</router-link>
      </ul>
    </nav>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
    data(){
    return{
      navList:[
        {id:1,title:"电影",path:"/films",icfont:'icon-geren'},
        {id:2,title:"影院",path:"/cinema",icfont:'icon-dianyingyuan'},
        {id:3,title:"个人中心",path:"/center",icfont:'icon-film'}
      ]
    }
  },
})
</script>

<style lang="scss" scoped>
.active{
color: pink;
}
nav{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #ffffff;
  margin-top: 200px;
      z-index: 1;
  ul{
    display: flex;
    list-style: none;

    li{
      flex: 1;
      i{
        font-size: 20px;
      }
    }
  }
}
</style>